<template>
<view>
<!-- 累计佣金模块开始 -->
<view class="accumulative">

  <view class="a_left">
      <view class="accumulative_content">分销佣金</view>
      <view class="accumulative_number">{{user.distribut_money|| '0.00'}}元</view>
  </view>
    <navigator url="/pages/user/withdrawals_list/withdrawals_list?type=1" class="accumulative_content w-details">提现明细</navigator>
</view>
<!-- 累计佣金模块结束 -->
<!-- 列表模块开始 -->
<view class="commission">
  <view class="withdrawable wrap">
    <view class="commission_list">
      <view class="commission_list_title">可提现佣金</view>
      <view class="commission_list_data red">{{user.withdraw|| '0.00'}}元</view>
    </view>
  </view>
  <view class="using_commission wrap">
        <view class="commission_list">
      <view class="commission_list_title">已提现佣金</view>
      <view class="commission_list_data">{{user.distribut_withdrawals_money|| '0.00'}}元</view>
    </view>
        <view class="commission_list">
      <view class="commission_list_title">待打款佣金</view>
      <view class="commission_list_data">{{user.wait|| '0.00'}}元</view>
    </view>


  </view>
  <view class="other_commission wrap">
     <view class="commission_list" @tap="changeTab">
      <view class="commission_list_title">用户须知</view>
      <image v-if="index_img==1" class="index_r" data-id="2" src="/static/images/xr_3.png"></image>
      <image v-if="index_img==2" class="index_r index_img" data-id="1" src="/static/images/xr_3.png"></image>
    </view>
    <view v-if="index_img==2" class="user_know">
       <view class="apply_description">1.买家确认收货（<text>{{shopping.auto_service_date||0}}天</text>）后，佣金才可提现。结算期内，买家如退
            货，佣金将自动扣除；</view>
  <view class="apply_description">2.可用佣金满 <text>{{distribut.distribut_withdrawals_money||0}}</text>元 才可申请提现。</view>
    </view>
  </view>
</view>
<!-- 列表模块结束 -->
<!-- 申请提现功能模块开始 -->
<view class="apply_cash wrap">
  <navigator class="apply_btn" url="/pages/distribut/withdrawals/withdrawals">提现</navigator>
</view>
<!-- 申请提现功能模块结束 -->
</view>
</template>

<script>
//index.js
var app = getApp();
var request = app.globalData.request;

export default {
  data() {
    return {
      user: {},
      distribut: {},
      shopping: {},
      index_img: 1 // 须知

    };
  },

  components: {},
  props: {},
  onShow: function () {
    this.commission();
  },
  methods: {
    // 用户须知
    changeTab: function (e) {
      var index_img = this.index_img;

      if (index_img == 1) {
        this.setData({
          index_img: 2
        });
      } else {
        this.setData({
          index_img: 1
        });
      }
    },
    commission: function () {
      var that = this;
      request.post('/api/Distribut/distribut_detail', {
        successReload: true,
        success: function (res) {
          if (res.data.result) {
            that.setData({
              shopping: res.data.result.shopping,
              distribut: res.data.result.distribut,
              user: res.data.result.user
            });
          }
        }
      });
    }
  }
};
</script>
<style>
page {
  background-color: #f5f5f5
}
.clearfix:after{
  content: '.';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  clear: both;
}
.wrap {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box
}
.accumulative {
  height: 180rpx;
  overflow: hidden;
  position: relative;
  background: #ff6a00;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;

}
.accumulative .accumulative_number {
  margin-top: 24rpx;
  text-align: center;
  color: #fff;
  font-size: 38rpx;
  font-weight: bold;
}
.accumulative .accumulative_content {
  font-size: 32rpx;
  text-align: center;
  margin-top: 5rpx;
  color: #fff;
}
.accumulative .accumulative_bg {
  width: 100%;
  height: 331rpx;
  position: absolute;
  bottom: 0;
  z-index: -1;
}
.commission .wrap {
  background-color: #fff;
  margin: 20rpx auto;
  width: 710rpx;
  border-radius: 10rpx;
}
.commission .wrap .commission_list {
  height: 106rpx;
  border-bottom: 1px solid #f3f3f3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;

}
.commission .wrap .commission_list:last-child {
  border-bottom: 0;
}
.commission .wrap .commission_list .index_r{
  width: 32rpx;
height: 32rpx;

}
.commission .wrap .commission_list .index_r.index_img{
  transform: rotate(90deg);

}
.commission .wrap .commission_list .commission_list_title {
  font-size: 28rpx;
  color: #1c1c1c;
  float: left;
  height: 106rpx;
  line-height: 106rpx;
  position: relative;
}
.commission .wrap .commission_list .commission_list_data {
  color: #1f1f1f;
  font-size: 28rpx;
  float: right;
  height: 106rpx;
  line-height: 106rpx;
}
.commission .wrap .commission_list .commission_icon {
  position: absolute;
  left: 4rpx;
  top: 33rpx;
  height: 40rpx;
  width: 40rpx;
}
.apply_cash {
  height: 380rpx;
  margin: 0 auto;
  border-radius: 10rpx;
}
.apply_cash .apply_description {
  color: #666;
  font-size: 24rpx;
}
.apply_cash .apply_description text {
  color: #fe4646;
}
.apply_cash .apply_btn {
  margin-top: 60rpx;
  height: 80rpx;
  width: 100%;
  border-radius: 40rpx;
  background-color: #fe4646;
  color: #fff;
  font-size: 30rpx;
  line-height: 80rpx;
  text-align: center;
}
.w-details{
    float:right;
    margin-right:20rpx;
    width: 180rpx;
height: 60rpx;
border: 2rpx solid #fff;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
  font-size: 30rpx !important;

}
.user_know{
  font-size: 28rpx;
  padding: 20rpx 0;
    color: #333;
}
.user_know text{
  color: #ff6a00;
}
</style>